<template>
  <view class="login__verify-comp">
    <view class="login__verify-comp-confirm">
      <view>本次操作需要短信确认，</view>
      <view>
        验证码已经发送至您的手机
        <text class="login__verify-comp-confirm-num">{{ hideMobile }}</text>
      </view>
    </view>
    <div class="login__verify-comp-input-wrap">
      <div class="login__verify-comp-input-inner">
        <input
          v-model="falseInputs[0]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 1 },
          ]"
          type="number"
          focus
          disabled
          :maxlength="1"
        />
        <input
          v-model="falseInputs[1]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 2 },
          ]"
          type="number"
          disabled
          :maxlength="1"
        />
        <input
          v-model="falseInputs[2]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 3 },
          ]"
          type="number"
          disabled
          :maxlength="1"
        />
        <input
          v-model="falseInputs[3]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 4 },
          ]"
          type="number"
          disabled
          :maxlength="1"
        />
        <input
          v-model="falseInputs[4]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 5 },
          ]"
          type="number"
          disabled
          :maxlength="1"
        />
        <input
          v-model="falseInputs[5]"
          :class="[
            'login__verify-comp-input-false',
            { active: verification.length === 6 },
          ]"
          type="number"
          disabled
          :maxlength="1"
        />
      </div>
      <input
        type="number"
        class="login__verify-comp-input-true"
        maxlength="6"
        v-model="verification"
      />
    </div>
  </view>
</template>

<script>
export default {
  props: {
    mobile: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      verification: '',
      falseInputs: Array(6).fill(''),
    };
  },

  computed: {
    hideMobile() {
      return this.mobile
        .toString()
        .replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
    },
  },

  watch: {
    verification(newValue, oldValue) {
      if (newValue !== oldValue) {
        const verifyArray = this.verification.split('');
        for (let i = 0; i < 6; i++) {
          this.falseInputs[i] = verifyArray[i];
        }
        this.$emit('change', newValue);
      }
    },
  },
};
</script>

<style lang="scss">
.login__verify-comp {
  margin-top: 30rpx;
  margin-bottom: 100rpx;
  &-confirm {
    font-size: 30rpx;
    color: $font-color-normal;
    text-align: center;
    line-height: 1.7em;

    &-num {
      color: $base-color;
      margin-left: 10rpx;
    }
  }

  &-input-wrap {
    margin-top: 60rpx;
    height: 60rpx;
    width: 100%;
    position: relative;
  }

  &-input-inner {
    text-align: center;
    position: absolute;
    width: 100%;
  }

  &-input-false {
    display: inline-block;
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: none;
    border-bottom: 4rpx solid #979797;
    margin-right: 40rpx;
    font-size: 56rpx;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      border-bottom: 4rpx solid $base-color !important;
      color: $base-color;
    }
  }

  &-input-true {
    position: relative;
    width: 560rpx;
    margin: 0 auto;
    height: 60rpx;
    line-height: 60rpx;
    text-align: left;
    font-size: 56rpx;
    border: none;
    letter-spacing: 70rpx;
    z-index: 10;
    opacity: 0;
  }
}
</style>
